<template>
  <nav v-if="total > 1">
    <ul class="pagination">
      <li
        v-for="i in total"
        :key="i"
        :class="i === page ? 'active' : ''"
        class="page-item"
      >
        <nuxt-link class="page-link" :to="whereTo(i)">
          {{ i }}
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Paggie',
  props: {
    total: {
      type: Number,
      default: 0,
    },
    page: {
      type: [Number, String],
      default: 1,
    },
    to: {
      type: Object,
      default: () => ({
        name: 'home',
      }),
    },
  },
  computed: {
    whereTo() {
      return page => {
        let to = { name: this.to.name, query: {} }
        if (this.to.params) to.params = { ...this.to.params }
        if (this.to.query) {
          to.query = { ...this.to.query }
        }
        to.query.page = page
        return to
      }
    },
  },
}
</script>

<style scoped></style>
